

<template>
  <div id="login">
    <el-link type="primary" class="buju" @click="Hlogin1">用户账号登录</el-link>
    <el-form :model="User" style="margin: auto;width: 250px;padding: 200px" >
      <el-form-item label="" class="color">
        <h1 class="threeD" style="color:cornflowerblue ;font-style:italic;font-size: xxx-large">后台系统</h1>
      </el-form-item>
      <el-form-item label="管理员" class="color" >
        <el-input v-model="User.uname" placeholder="账号/手机号"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="color">
        <el-input type="password" v-model="User.userPassword" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name:"login",
  data(){
    return{
      User:{
        uname:"",
        userPassword:""
      },
      dialogVisible:false,
      designFileForm12:{}//注册表单
    }
  },
  methods:{
    //系统账号登录
    Hlogin1(){
      this.$router.push('/Login')
    },
    //登录    \
    login(){
      //打印账号密码
      console.log(this.User)
      //传输到后台
      this.$axios.post('/zhuche/login1',this.User).then(res => {
        console.log(6666,res.data)
        if(res.data!=0){
          this.$message({
            message: '登陆成功',
            type:'success'
          })
          window.sessionStorage.setItem("uid6",JSON.stringify(res.data))
          this.$router.push('/Home1')
        }else{
          this.$message.error('账号或密码错误')
        }
      }).catch(err => {
        console.log(err)
      })

    }
  }
}
</script>
<style>
.color .el-form-item__label{
  color: cornflowerblue;
}
#login {
  background: url("images/1.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
}
.threeD{
  font-size:80px; /*设置字体大小*/
  font-weight:800; /*设置字体粗细*/
  text-shadow:1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
  2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
  5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
  6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
  9px 6px #009916, 9px 8px #006615, 11px 7px #009916/*设置文字阴影*/
}
.buju{
  display: flex;
  justify-content: flex-end;
  float: right;
}
</style>